import {Form, Row, Col, Select, Space, Button} from 'antd'
import React, {useEffect, useState} from 'react'
import {history} from 'umi'
import cardStyles from '../index.less'
import {getAllParking} from '@/service/storage/archives'
import {
	FormSelect,
	FormInput,
	FormTime,
} from '@/components/SearchForm/SearchFormItem'
import {formatDate} from '@/utils/common/dateFilter'
import {returnCar} from '@/service/order'
import {getDict} from '@/service/common/dict'

const formLayout = {
	labelCol: {
		xs: {span: 24},
		sm: {span: 4},
	},
	wrapperCol: {
		xs: {span: 24, offset: 0},
		sm: {span: 20, offset: 0},
	},
}
const styles = {
	width300: {width: '300px'},
	width600: {width: '600px'},
}
function ReturnCar(props: any) {
	const {info} = props
	const [form] = Form.useForm()
	const [allParking, setAllParking] = useState<any>([])
	const [loading, setLoading] = useState(false)
	// 获取路由中订单编号
	const [orderIds, setOrderIds] = useState('')
	const routerName = () => {
		setOrderIds(info?.id)
	}
	const [dict, setDict] = useState({
		retrun_cat_type: [], // 退车类型
	})
	useEffect(() => {
		getDict(
			{
				dictKeys: [
					'retrun_cat_type', // 退车类型
				],
			},
			(res: any) => {
				setDict(res)
			},
		)
		routerName()
	}, [info])
	/** 获取请车厂列表 */
	const allParkingFun = () => {
		getAllParking({}).then((res: any) => {
			if (res?.data) {
				setAllParking(() => res.data)
			}
		})
	}
	useEffect(() => {
		allParkingFun()
	}, [])
	const onFinish = (values: any) => {
		setLoading(true)
		const data = {...values}
		data.applyTime = formatDate(values.applyTime, 'YYYY-MM-DD HH:mm:ss')
		// 获取退回车类型名字
		// dict?.retrun_cat_type?.forEach((res:any)=>{
		//   if(res.key === data.applyType){
		//      data.applyTypename = res.label
		//   }
		// })
		// 获取退回仓库名称
		allParking?.forEach((res: any) => {
			if (res.id === data.putDepotId) {
				data.putDepotName = res.warehouseName
			}
		})
		data.orderCarId = orderIds
		data.putDepotId = values?.putDepotId
		returnCar(data).then((res: any) => {
			if (res?.success) {
				setLoading(false)
				history.goBack()
			} else {
				setLoading(false)
			}
		})
	}
	// 取消
	const cancel = () => {
		history.goBack()
	}
	// 退车类型选中
	const onFashionChange = (value: string, option: any) => {
		form.setFieldValue('applyTypename', option?.dictValue)
	}

	return (
		<div className={cardStyles.pages}>
			<div className={cardStyles.card} id="returnCar">
				<p className={cardStyles.title}>退车申请</p>
				<Form
					form={form}
					{...formLayout}
					wrapperCol={{flex: 1}}
					autoComplete="off"
					onFinish={onFinish}>
					<Row gutter={24} className={cardStyles.rows}>
						<Col span={12}>
							<FormTime
								name="applyTime"
								subtype="date"
								label="退车时间"
								style={styles.width300}
								rules={[
									{required: true, message: '请选择退车时间'},
								]}
							/>
						</Col>
						<Col span={12}>
							<Form.Item
								name="applyType"
								label="退车类型"
								rules={[
									{required: true, message: '请选择退车类型'},
								]}>
								<Select
									allowClear
									placeholder="请选择退车类型"
									fieldNames={{
										value: 'dictKey',
										label: 'dictValue',
									}}
									options={dict?.retrun_cat_type}
									style={styles.width300}
									onChange={onFashionChange}
								/>
							</Form.Item>
						</Col>
						<Col span={0}>
							<Form.Item name="applyTypename" />
						</Col>
						{/* <Col span={12}>
              <FormInput
                  name="returnCar"
                  label="退车里程数"
                  placeholder="请填写退车里程数"
                  style={{ width: '300px' }}
                  disabled
                />
              </Col> */}
						<Col span={12}>
							<FormSelect
								style={styles.width300}
								name="putDepotId"
								label="退回仓库"
								placeholder="请选择退回仓库"
								rules={[
									{required: true, message: '请选择退回仓库'},
								]}
								items={allParking}
								keys="id"
								title="warehouseName"
							/>
						</Col>
						<Col span={12}>
							<FormInput
								name="applyRemark"
								label="备注"
								maxLength={200}
								placeholder="请填写备注信息，不超过200个字符"
								allowClear
							/>
						</Col>
					</Row>
					<Row justify="center" style={{marginTop: '20px'}}>
						<Form.Item>
							<Space>
								<Button shape="round" onClick={cancel}>
									取消
								</Button>
								<Button
									shape="round"
									type="primary"
									htmlType="submit"
									loading={loading}>
									提交
								</Button>
							</Space>
						</Form.Item>
					</Row>
				</Form>
			</div>
		</div>
	)
}
export default ReturnCar
